<template>
  <div class="aid">
    <div class="base">
      <p>跟进
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="跟进时间" prop="FollowTime">
          <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" v-model="form.FollowTime" style="width: 100%;"
                         @change="onChange"
          />
        </a-form-model-item>
        <a-form-model-item label="跟进人" prop="FollowUserID">
          <!-- <a-select v-model="form.FollowUserID" :allowClear="true" disabled>
            <a-select-option v-for="(item, index) in userList" :key="index" :value="item.ID">{{ item.Name }}</a-select-option>
          </a-select> -->
          <a-input v-model="FollowUserName" disabled/>
        </a-form-model-item>
        <a-form-model-item label="跟进方式" prop="FollowType" v-if="isShow">
          <a-checkbox-group @change="followChange" >
            <a-checkbox v-for="item in followTypeList" :value="item.ID" :checked="isCheck">
              {{ item.ItemName }}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item label="跟进内容" prop="Content">
          <a-input v-model="form.Content" :allowClear="true" type="textarea" :auto-size="{ minRows: 4, maxRows: 6 }"/>
        </a-form-model-item>
        <a-form-model-item label="跟进凭证" class="mustIcon">
          <a-upload
            action="http://api.400.hj.acxk.net/api/Upload/UploadImage"
            :headers="uploadHeader"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="upload" /> 选择文件 </a-button>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img style="width: 100%" :src="previewImage" />
          </a-modal>
        </a-form-model-item>
        <a-form-model-item label="" :wrapper-col="{ offset: 5 }">
          <el-button type="success" size="medium" class="btn2" @click="handleSubmit(3)">
            跟进
          </el-button>
          <el-button type="success" size="medium" class="btn2" @click="handleSubmit(4)">
            跟进并完成
          </el-button>
          <el-button size="medium" style="margin-left: 10px;" @click="closeFunction(false)">
            取消
          </el-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
	import {
		// getDistributiontUser,
		getFollowDataInfo,
		addFollow
	} from '@/api/follow'
	function getBase64(file) {
	  return new Promise((resolve, reject) => {
	    const reader = new FileReader()
	    reader.readAsDataURL(file)
	    reader.onload = () => resolve(reader.result)
	    reader.onerror = error => reject(error)
	  })
	}
	export default {
		props: {
			messageID: String,
			nowTime: String
		},
		watch: {
			nowTime: function(text) {
				this.form.FollowType = ''
				this.form.Content = ''
				this.form.FollowPhoto = ''
				this.fileList = []
				this.form.MessageID = this.messageID
				this.form.FollowUserID = JSON.parse(localStorage.getItem('user')).id
				this.form.FollowTime = this.getNowTime()
				this.isShow = true
			}
		},
		data() {
			return {
				fileList: [],
				uploading: false,
				previewVisible: false,
				previewImage: '',
				uploadHeader: { Authorization: JSON.parse(localStorage.getItem('user')).data},
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				userList: [],
				followTypeList: [],
				CenterDropdownList: [],
				FollowUserName: JSON.parse(localStorage.getItem('user')).name,
				FollowTypeName: '',
				isCheck: false,
				isShow: true,
				form: {
					MessageID: '',
					FollowTime: '',
					FollowUserID: JSON.parse(localStorage.getItem('user')).id,
					FollowType: '',
					Content: '',
					FollowPhoto: '',
					FollowState: Number
				},
				rules: {
					FollowTime: [{
						required: true,
						message: '请选择跟进时间',
						trigger: 'blur'
					}],
					FollowUserID: [{
						required: true,
						message: '请选择跟进人',
						trigger: 'blur'
					}],
					FollowType: [{
						required: true,
						message: '请输入跟进方式',
						trigger: 'blur'
					}],
					Content: [{
						required: true,
						message: '请输入跟进内容',
						trigger: 'blur'
					}],
					FollowPhoto: [{
						required: true,
						message: '请上传跟进凭证',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this._getDataInfo()
			// this.getNowTime()
		},
		methods: {
			closeFunction(flag) {
				this.$emit('closeFun', flag)
				this.isShow = false
				this.fileList = []
			},
			getNowTime() {
			    let date = new Date()
					let year = date.getFullYear()
					let month = date.getMonth()
					let day = date.getDate()
			    return `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
			},
			onChange(value, dateString) {
				let beginDate = new Date(this.getNowTime())
				let endDate = new Date(value)
				if (endDate <= beginDate) {
					  this.form.FollowTime = dateString
						return true
				}
				this.form.FollowTime = ''
				this.$message.error('跟进时间不能超过当前时间')
				return false
			},
			async _getDataInfo() {
				// let res = await getDistributiontUser()
				// this.userList = res.data.data
				let type = await getFollowDataInfo()
				this.followTypeList = type.data.data
			},
			followChange(item) {
				this.form.FollowType = item.join(',')
			},
			handleCancel() {
				this.previewVisible = false
			},
			async handlePreview(file) {
				if (!file.url && !file.preview) {
					file.preview = await getBase64(file.originFileObj)
				}
				this.previewImage = file.fileUrl || file.preview
				this.previewVisible = true
			},
			handleChange({fileList}) {
				this.fileList = fileList
			},
			handleSubmit(e) {
				let imgList = []
				this.fileList.forEach(item => {
					imgList.push(item.response.fileName + '|' + item.response.fileUrl)
				})
				if (imgList.length == 0) {
					this.$message.error('请上传跟进凭证')
					return false
				}
				this.form.FollowPhoto = imgList.join(',')
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						this.form.FollowState = e
						let res = await addFollow(this.form)
						this.$message.success(res.data.msg)
						if (res.data.code === 1) {
							setTimeout(() => {
									this.closeFunction(true)
							}, 1000)
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.mustIcon{
		/deep/.ant-form-item-label{
			label{
				&::before{
					display: inline-block;
					margin-right: 4px;
					color: #f5222d;
					font-size: 14px;
					font-family: SimSun, sans-serif;
					line-height: 1;
					content: '*';
				}
			}
		}
	}
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: fixed;
		width: 600px;
		height: 680px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -340px;
		overflow-y: auto;
		border-radius: 8px;
		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;
		.closeCircle{
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
</style>
